<template>
  <div class="page-wrap">
    <div class="top-wrap">
      <el-date-picker
        style="width: 160px; margin: 0 6px"
        v-model="timeRange"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
      />
      车间<el-select :popper-append-to-body="false" v-model="currentWorkshop" placeholder="请选择车间" style="margin: 0 6px">
        <el-option v-for="item in workshops" :key="item" :label="item" :value="item" />
      </el-select>

      机台
      <el-select style="width: 80px; margin: 0 6px" v-model="mid" placeholder="请选择" @change="handleSelectChange">
        <el-option
          v-for="item in [{ label: '1234567890ABCDEF', value: '1234567890ABCDEF' }]"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button @click="handleSearchBtnClick" slot="append" icon="el-icon-search"> 检索</el-button>
      <!-- <el-button @click="handleSearchBtnClick" slot="append"> 导出</el-button> -->
    </div>
    <div class="spin-status">
      <div class="chart-container">
        <Chart height="100%" width="100%" :list="pageInfo || []" />
      </div>
    </div>
  </div>
</template>
<script>
import BlockTitle from '@/components/BlockTitle/index.vue'
import request from '@/utils/request'
import dayjs from 'dayjs'
import Chart from '@/components/Charts/MixChart'
var spinlist = [{ label: '全部', value: '全部' }]
for (let i = 1; i < 100; i++) {
  spinlist.push({ label: i, value: i })
}
//console.log(BlockTitle)
export default {
  name: 'ProductTotal',
  components: {
    Chart,
    BlockTitle,
    Gap: {
      template: `<div style="width:10px"></div>`,
    },
    GapX: {
      template: `<div style="width:20px"></div>`,
    },
  },
  filters: {
    toTime(t) {
      return t ? dayjs(t).format('MM-DD HH:mm:ss') : '-'
    },

    twoNum(e) {
      return (e < 10 ? '0' : '') + e
    },
    thrNum(e) {
      return ('000' + e).slice(-3)
    },
    toDotTime(r) {
      const now = r.endTime ? dayjs(r.endTime) : dayjs()
      let t = now.diff(r.startTime, 'second')
      let timeStr = ''
      let converted = Math.floor(t / (24 * 60 * 60))
      if (converted > 0) timeStr += `${converted}天`
      t = t % (24 * 60 * 60)
      converted = Math.floor(t / (60 * 60))
      if (converted > 0) timeStr += `${converted}时`
      t = t % (60 * 60)
      converted = Math.floor(t / 60)
      if (converted > 0) timeStr += `${converted}分`
      converted = t % 60

      if (converted > 0) timeStr += `${converted}秒`
      return timeStr
    },
  },
  data() {
    return {
      except: '全部',
      timeRange: [],
      spinNum: '全部',
      spinlist,
      mid: '1234567890ABCDEF',
      sqlList: [
        {
          value: `select * from spin_exceptional where mid='000000000000000001' and inx = 0 order by side,inx,type,startTime `,
          label: 'all',
        },
      ],
      exceptChr: [
        { label: '0-断头', value: 0 },
        { label: '1-掉线', value: 1 },
        { label: '2-闲置', value: 2 },
        { label: '3-弱捻', value: 3 },
        { label: '4-严重弱捻', value: 4 },
        { label: '5-锭子故障', value: 5 },
        { label: '全部', value: '全部' },
      ],
      // exceptChr: ['0-断头', '1-掉线', '2-闲置', '3-弱捻', '4-严重弱捻', '5-锭子故障'],
      leftPageInfo: { pageSize: 1000, pageNum: 1 },
      rightPageInfo: { pageSize: 1000, pageNum: 1 },
      customColWidth: {
        id: 150,
        PackType: 80,
        Side: 60,
        SpinStartAddr: 70,
        SpinNumber: 60,
      },
      workshops: ['车间1', '车间2', '车间3'],
      macLis: [],
      macDetail: {},
      currentMac: '',
      currentWorkshop: '',
      dataList: [],
      propList: [],
      leftData: [],
      rightData: [],
      currentRow: '',
      pageInfo: [],
    }
  },
  computed: {},
  created() {
    this.getData()
    // const defaultSqlList = localStorage.getItem('sqlList_except')
    // if (defaultSqlList) this.sqlList = JSON.parse(defaultSqlList)
    // const defaultSql = localStorage.getItem('defaultSql_except')
    // if (defaultSql) this.sql = this.defaultSql = defaultSql
  },
  mounted() {
    window.dj = dayjs
    //console.log(dayjs)
  },
  methods: {
    handleSearchBtnClick() {
      this.getData()
    },
    async deleteFromSqlList() {
      const r = await this.$confirm('确定要移除当前sql吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      if (r != 'confirm') return
      const inx = this.sqlList.findIndex((e) => e.value == this.sql)
      if (inx > -1) {
        this.sqlList.splice(inx, 1)
        localStorage.setItem('sqlList_except', JSON.stringify(this.sqlList))
        if (this.sqlList.length > 0) {
          this.sql = this.sqlList[0].value
        }
        this.$message.info('删除完成')
      }
    },

    async addToSqlList() {
      const inx = this.sqlList.findIndex((e) => e.value == this.sql)
      if (inx > -1) return this.$message.info('该SQL已经保存过了')
      try {
        const r = await this.$prompt('请输入语句说明', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValidator: (e) => {
            return e != ''
          },
          inputErrorMessage: '不能为空',
        })

        this.sqlList.push({ value: this.sql, label: r.value })
        localStorage.setItem('sqlList_except', JSON.stringify(this.sqlList))
      } catch (e) {
        this.$message.info('你取消了')
      }
    },
    // pickerOptions: {
    //   shortcuts: [
    //     {
    //       text: '最近一周',
    //       onClick(picker) {
    //         const end = new Date()
    //         const start = new Date()
    //         start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
    //         picker.$emit('pick', [start, end])
    //       },
    //     },
    //     {
    //       text: '最近一个月',
    //       onClick(picker) {
    //         const end = new Date()
    //         const start = new Date()
    //         start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
    //         picker.$emit('pick', [start, end])
    //       },
    //     },
    //     {
    //       text: '最近三个月',
    //       onClick(picker) {
    //         const end = new Date()
    //         const start = new Date()
    //         start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
    //         picker.$emit('pick', [start, end])
    //       },
    //     },
    //   ],
    // },

    handleSelectChange(e) {
      console.log('handleSelectChange', e)
    },
    handleSizeChange(e, side) {
      console.log('handleSizeChange', e)

      this.getData()
    },
    handleCurrentChange(e, side) {
      this.getData()
    },
    async getData() {
      const { mid, except, currentRow, spinNum } = this
      console.log(this.currentRow, this.spinNum)
      const loading = this.$loading({
        lock: true,
        text: `正在加载数据`,
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      try {
        const res = await request({
          url: '/db/getDataBySp',
          method: 'post',
          data: {
            spName: 'sp_dtbb',
            params: [
              { isnum: false, value: '2024-03-01' },
              { isnum: true, value: 123 },
            ],
            pagenum: 1,
            pagesize: 20,
          },
          // data: { sql, pagenum, pagesize },
        })
        console.log(res)
        if (res.list.length == 0) {
          loading.close()
          return
        }
        // const { pageNum, pageSize, pages, prePage, size, startRow, total } = res.obj

        this.pageInfo = res.list

        //console.log('#############pageInfo', this.pageInfo)
      } catch (e) {
        console.log('Error:', e)
      } finally {
        loading.close()
      }
    },
  },
}
</script>
<style lang="scss" scoped>
@import '~@/styles/variables.scss';

.page-wrap {
  padding: 10px 20px;
  box-sizing: border-box;
}

.sub-item {
  width: 44px;
  text-align: center;
  border-right: 1px #eee solid;
  flex-shrink: 0;
}

.top-wrap {
  display: flex;
  align-items: center;
  font-size: 12px;
}

.spin-status {
  margin-top: 10px;
  height: calc(100vh - 170px);
  display: flex;
}

.spin-status-inner {
  width: 50%;
}

.spin-list-row {
  // border-left: 1px solid #eee;
  // border-right: 1px solid #eee;
  display: flex;
}

.spin-list-col {
  width: 4%;
  height: 40px;
  padding: 4px;
  box-sizing: border-box;
}

.spin-list-item {
  width: 100%;
  height: 100%;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  display: flex;
  font-size: 12px;
  align-items: center;
  justify-content: center;
}

.spin-list-title {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #409eff;
  letter-spacing: 1px;
}

::v-deep .el-select .el-select-dropdown .el-scrollbar {
  padding-bottom: 15px !important;
}

.chart-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
}
</style>
